import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './index.css';
import { Modal, Button } from 'antd';
import axios from 'axios';
import { aUrl } from '../../static/axios_url';
export default function Header() {
    //用户是否登录
    const [site1, setsite1] = useState([])
    const [site2, setsite2] = useState([])
    const [site3, setsite3] = useState([])
    const [nowSite, setnowSite] = useState('请选择')
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [user, setuser] = useState('');
    useEffect(() => {
        setuser(sessionStorage.getItem("username"))
    }, [sessionStorage.getItem("username")])
    useEffect(() => {
        axios.post(aUrl + '/getSiteData', { code: 1 }).then(res => {
            setsite1(res.data)
        })
    }, [])
    //退出
    function end() {
        return () => {
            sessionStorage.removeItem("username");
        }
    }
    const navigate = useNavigate()
    // 我的订单
    function toMyBill() {
        if (sessionStorage.getItem("username")) {
            navigate('/mycenter/mybill')
        } else {
            message.warning('请先登录！！')
        }
    }
    // 我的信息
    function toMymes() {
        if (sessionStorage.getItem("username")) {
            navigate('/mycenter/mymes')
        } else {
            message.warning('请先登录！！')
        }
    }
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        var myselect1 = document.getElementById("city");
        var index1 = myselect1.selectedIndex;
        var myselect2 = document.getElementById("district");
        var index2 = myselect2.selectedIndex;
        setnowSite(myselect1.options[index1].text + myselect2.options[index2].text)
        setIsModalVisible(false);
    };
    const selectProvince = () => {
        var myselect = document.getElementById("province");
        var index = myselect.selectedIndex;
        if (myselect.options[index].value !== '') {
            axios.post(aUrl + '/getSiteData', { code: 2, p_id: myselect.options[index].value }).then(res => {
                setsite2(res.data)
            })
        } else {
            setsite2([])
            setsite3([])
        }
    }; const selectCity = () => {
        var myselect = document.getElementById("city");
        var index = myselect.selectedIndex;
        if (myselect.options[index].value !== '') {
            axios.post(aUrl + '/getSiteData', { code: 3, c_id: myselect.options[index].value }).then(res => {
                setsite3(res.data)
            })
        } else {
            setsite3([])
        }
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div className="header">
            <div className="header-main">
                <span>所在城市 : </span>
                <span className="city">{nowSite}</span><i onClick={showModal} className="fa fa-chevron-down"></i>
                <div className="header-right clear">
                    <div className="user"><span >你好，</span><i className="header-user">{user}</i></div>
                    <Modal title="请选择当前位置"
                        footer={[false]}
                        visible={isModalVisible}
                        style={{ top: '30%' }}
                        width={690}
                        onCancel={handleCancel}
                    >
                        <div id='site-now'>
                            <div className='site-idea'><span>建议您的收货地址 ：</span><button>郑州市高新区</button></div>
                            <div className='site-select'>
                                <div>
                                    <select name="province" id="province" onChange={selectProvince}>
                                        <option value="">请选择选择省</option>
                                        {
                                            site1.map((site1, i) => {
                                                return <option key={i} value={site1.p_id}>{site1.province}</option>
                                            })
                                        }
                                    </select>
                                    省
                                </div>
                                <div>
                                    <select name="city" id="city" onChange={selectCity}>
                                        <option value="">请选择选择市</option>
                                        {
                                            site2.map((site2, i) => {
                                                return <option key={i} value={site2.c_id}>{site2.city}</option>
                                            })
                                        }
                                    </select>
                                    市
                                </div>
                                <div>
                                    <select name="district" id="district"
                                    >
                                        <option value="">请选择选择区</option>
                                        {
                                            site3.map((site3, i) => {
                                                return <option key={i} value={site3.d_id}>{site3.district}</option>
                                            })
                                        }
                                    </select>
                                    区
                                </div>
                            </div>
                            <button className='ok' onClick={handleOk}>保存</button>
                        </div>
                    </Modal>
                    <ul className="clear">
                        <li><Link to='/login' onClick={end()}>{user ? '退出' : '点我登录'}</Link></li>
                        <li><Link to='#' onMouseDown={toMyBill}>我的订单</Link></li>
                        <li><Link to='#' onMouseDown={toMymes}>我的消息</Link></li>
                        <li><Link to='#'>我是商家</Link></li>
                        <li><i className="fa fa-phone phone"></i><span className="phone-num"> 400-800-8820</span></li>
                    </ul>
                    <span className="phone"></span>
                </div>
            </div>
        </div>
    )
}
